<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div ref="next">
        <div v-for="item in arr" :key="item">{{item}}</div>
      </div>
      {{num}}
      <button @click="add">添加</button>
    </div>
  </body>
  <script type="text/javascript">
    let vdom = new Vue({
      el: '#app',
      data: {
        num: 0,
        arr: [1, 2, 3],
      },
      methods: {
        add() {
          this.arr.push(4);
          //   let children = this.$refs.next;
          //   let len = children.childNodes.length;
          //   console.log(len); //添加后 应该是四个 但实际只有三个
          /*
            用于获取更新后的dom
            vue的数据更新是异步的
        */
          this.$nextTick(() => {
            this.num++;
            let children = this.$refs.next;
            let len = children.childNodes.length;
            console.log(len); //添加 nextTick后 可以获取真实的DOM数量
          });
        },
      },
    });
  </script>
</html>
